<template>
  <bsCard v-loading="loading" class="lables-wrapper" :width="getBsLRWPercent(630)" height="200px">
    <div class="bs-card-title">企业标签</div>
    <div class="label-content">
      <div class="per-lable" v-for="curLabel of labelData" :key="curLabel.type">
        <div class="label-val">{{ curLabel.num }}</div>
        <div class="label-text">{{ curLabel.type }}</div>
      </div>
    </div>
  </bsCard>
</template>

<script>
import bsCard from './bsCard.vue'
import { getEnterpriseLabel } from '@/api/bigscreen'
export default {
  name: 'lables',
  components: {
    bsCard
  },
  inject: ['getBsLRWPercent'],
  data() {
    return {
      loading: true,
      //
      labelData: [
        // {
        //   type: '',
        //   num: ''
        // }
      ]
    }
  },
  created(){
    this.fetchData()
  },
  methods: {
    async fetchData(){
      this.loading = true
      try {
        const res = await getEnterpriseLabel()
        if(res.resultCode === 200){
          this.labelData = res.resultData.length > 8 ? res.resultData.slice(0,8) : res.resultData
        }
      } catch (error) {
        console.log(error)
      }
      this.loading = false
    }
  }
}
</script>

<style lang='scss'>
// 六边形宽高比
$whRadio: 85 / 92;
$sizeRadio: 190 / 92;
$bgsizeH: 170; // 170
// TODO: 位移比例

$polygon_w: $bgsizeH / $sizeRadio;
$polygon_h: $bgsizeH / $sizeRadio * $whRadio;
.lables-wrapper {
  .label-content {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    height: 160px;
    width: 100%;
    background-image: url('../assets/label.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: auto #{$bgsizeH}px;

    overflow: hidden;
  }

  .per-lable {
    position: absolute;
    top: 70px;
    // left: 46px;
    display: flex;
    flex-flow: column;
    justify-content: center;
    text-align: center;
    // text-align: justify;
    width: #{$polygon_w}px;
    height: #{$polygon_h}px;
    // background-color: chartreuse;
    // transform: translate(15px, 70px);
    clip-path: polygon(25% 0, 0 50%, 25% 100%, 75% 100%, 100% 50%, 75% 0);
    // &::before {
    //   content: '';
    //   width: 46px;
    //   height: 100%;
    //   float: left;
    //   shape-outside: polygon(23px 0, 0 50%, 23px 100%, 24px 100%, 2px 50%, 25px 0);
    // }

    // &::after {
    //   content: '';
    //   width: 45px;
    //   height: 100%;
    //   float: right;
    //   shape-outside: polygon(21px 0, 43 50%, 21px 100%, 23px 100%, 100% 50%, 23px 0);
    // }

    @for $i from 1 through 8 {
      &:nth-child(#{$i}){
        left: #{($polygon_w * 0.89) * $i - 28}px;
      }
    }
    &:nth-child(even){
      top: 27px;
    }
  }

  .label-val{
    font-size: 24px;
    line-height: 24px;
  }

  .label-text{
    font-size: 16px;
    line-height: 15px;
  }
}
</style>

